<template>
  <div id="app">
    <transition name="fade" mode="out-in">
        <keep-alive :max="3">
            <component :is="coms[currentIndex]"/>
        </keep-alive>
    </transition>
    
    <Tabbar :currentIndex="currentIndex" @change="handleClick"></Tabbar>
  </div>
</template>

<script>
import app from './App.vue';
import Bao from './baobao.vue';
import order from './order.vue';
import mine from './mine.vue';
import Tabbar from '@/components/Tabbar';
export default {
    data(){
        return {
            currentIndex:0,
            coms:['app','Bao','order','mine']
        }
    },
    components:{
            app,Bao,Tabbar,order,mine
        },
    methods:{
        handleClick(index){
            this.currentIndex = index;
            console.log(this.currentIndex)
        }
    }
}
</script>

<style lang="scss">
.fade-enter{
    opacity: 0;
}
.fade-enter-active{
    transition: all 0.2s;
}
.fade-enter-to{
    opacity: 1;
}
.fade-leave{
    opacity: 0;
}
.fade-leave-active{
    transition: all 0.2s;
}
.fade-leave-to{
    opacity: 1;
}
</style>